<template>
  <view class="formBox">
    <uni-forms
      ref="valiForm"
      :rules="rules"
      v-model="formData"
      label-position="top"
      label-width="150"
    >
      <template v-if="type === 0">
        <uni-forms-item label="分配日期" required name="claimingTime">
          <uni-datetime-picker type="date" v-model="formData.claimingTime" />
        </uni-forms-item>
        <uni-forms-item label="所在部门" required name="deptId">
          <uni-data-picker
            placeholder="请选择部门"
            popup-title="请选择部门"
            :localdata="treeData"
            v-model="formData.deptId"
          />
        </uni-forms-item>
        <uni-forms-item label="选择人员" required name="personId">
          <uni-data-select
            placeholder="请选择"
            :localdata="
              appStore.personData.filter((item) =>
                formData.deptId ? item.deptId === formData.deptId : true
              )
            "
            v-model="formData.personId"
          />
        </uni-forms-item>
        <uni-forms-item label="职级" name="rank">
          <uni-easyinput v-model="formData.rank" placeholder="请输入" />
        </uni-forms-item>
      </template>
      <uni-forms-item label="经办人" name="claimingPersonId">
        <uni-data-select
          placeholder="请选择"
          :localdata="personData"
          v-model="formData.claimingPersonId"
        />
      </uni-forms-item>
    </uni-forms>
    <button class="btn" type="primary" @click="onSubmit('valiForm')">
      提交
    </button>
  </view>
</template>

<script>
import useAppStore from '@/store/modules/app';
import { getUserAllList } from '@/api/index';
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      treeData: [],
      personData: [], // 系统用户
      // 表单数据
      formData: {
        claimingTime: '',
      },
      // 规则
      rules: {
        deptId: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
        personId: {
          rules: [
            {
              required: true,
              errorMessage: '请选择内容',
            },
          ],
        },
        claimingTime: {
          rules: [
            {
              required: true,
              errorMessage: '请选择时间',
            },
          ],
        },
      },
      // store
      appStore: useAppStore(),
    };
  },
  watch: {
    'formData.date': {
      handler(newVal) {},
      immediate: false,
      deep: true,
    },
  },
  created() {
    console.log(0, this.data);
    this.formData.claimingTime = this.$util.timestampToTime(
      new Date().getTime(),
      'YYYY-MM-DD'
    );
    this.treeData = this.$util.processingTree(
      this.appStore.deptData,
      'value',
      'parentId'
    );
    this.init();
  },
  methods: {
    init() {
      getUserAllList().then((res) => {
        this.personData = res.data.map((item) => {
          return {
            label: item.nickName,
            text: item.nickName,
            value: item.userId,
          };
        });
      });
    },
    // 提交
    onSubmit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$emit('callback', res);
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.formBox {
  padding: 60rpx 48rpx 100rpx;
  border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  overflow: hidden;
  .uni-forms {
    min-height: 38vh;
  }
}
</style>
